import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { Toast } from "antd-mobile";
import yhTools from "../../../../tools/yh";
import { InterfaceG } from "../../../../config/Config";
import "./SupportBankPage.scss";

class SupportBankPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			channelCode: this.props.match.params.channelCode,
			loadStatus: "0", //'0'：数据加载中，'1'：加载完成，'2'：加载失败
			bankList: [
				//     {
				//     "amount": "50000",//单笔限额
				//     "bankCode": "102",
				//     "bankName": "中国工商银行",//银行名称
				//     "channelCode": "huatong",//渠道编号
				//     "dayAmount": "50000",//当日限额
				//     "logUrl": "http://10.0.12.26/h5/image/bankLogo/ICBC.jpg"
				// }
			]
		};
	}

	componentDidMount() {
		console.log(this.props.match.params.channelCode);
		this.getInitData();
	}

	getInitData = () => {
		let objs = {
			url: InterfaceG.getSupportBank,
			params: {
				channelCode: this.state.channelCode
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100, () => {});
		let _that = this;
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				_that.setState({
					loadStatus: "1",
					bankList: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	render() {
		const _pageParams = {
			header: {
				title: "支持银行"
			},
			loadStatus: this.state.loadStatus, // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="support-bank-page">
					{this.state.channelCode !== "yhjr" && (
						<div className="top-tips">
							华通银行电子账户仅支持绑定以下银行借记卡
						</div>
					)}

					<div className="list">
						{this.state.bankList.map((item, index) => {
							return (
								<div className="bank-item" key={index}>
									<img alt="" className="item-left-img" src={item.logUrl} />
									<div className="item-center">
										<div className="center-top">{item.bankName}</div>
										{/* <div className="center-bottom">
											单笔上限{item.amount}，单日上限{item.dayAmount}
										</div> */}
									</div>
								</div>
							);
						})}
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(SupportBankPage);
